<template>
  <div id="box">
    <router-view />
    <van-tabbar id="tabbar" active-color="#1989fa" v-model="active" route>
      <van-tabbar-item replace to="/home/practice" icon="../assets/ex.png"
        >练习</van-tabbar-item
      >
      <van-tabbar-item replace to="/home/self" icon="../assets/自习.png"
        >自习</van-tabbar-item
      >
      <van-tabbar-item @click="showNew" icon="../assets/新建-.png">
      </van-tabbar-item>
      <van-tabbar-item
        replace
        to="/home/found"
        icon="../assets/发现激活 (1).png"
        >发现</van-tabbar-item
      >
      <van-tabbar-item replace to="/home/my" icon="../assets/我的-我的.png"
        >我的</van-tabbar-item
      >
    </van-tabbar>
    <van-popup
      round
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '50%' }"
      v-model="show"
    >
    </van-popup>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      active: 0,
      show: false,
    };
  },
  methods: {
    showNew() {
      this.show = true;
    },
  },
};
</script>

<style lang="scss">
#tabbar {
  height: 167px;
  img {
    width: 47px;
    height: 47px;
  }
  > div:nth-of-type(3) {
    img {
      width: 120px;
      height: 120px;
    }
  }
  .van-tabbar-item__text {
    font-size: 20px;
  }
}
#box {
  width: 750px;
  height: 1624px;
  font-size: 20px;
}
</style>
